<template>
  <!-- 页面-角色管理-查看详情-已分配功能组组件 -->
  <div>
    <InnerPageTable ref="menuTable" :config="menuTableConfig"> </InnerPageTable>
  </div>
</template>
<script>
import roleAPI from "@/api/roleApi.js";
import valueSetAPI from "@/api/valueSetAPI.js";
import { roleDetailFuncGroupColumns } from "./columns.js";
import locales from "./locales.js";

export default {
  mixins: [locales],
  props: {
    roleId: {
      type: String,
      default() {
        return "";
      }
    }
  },
  data() {
    return {
      menuTypeList: {}
    };
  },
  computed: {
    menuTableConfig() {
      return {
        loadDataFn: this.queryAssignedMenu,
        // initParam: { roleId: this.roleId },
        columnsFn: roleDetailFuncGroupColumns.bind(this),
        isPage: false,
        autoFirst: false,
        rowClassNameFn: this.rowClassName // 自定义行样式
      };
    }
  },
  created: function () {
    // 初始化
    this.initMenuType();
  },
  methods: {
    // 自定义行样式
    rowClassName(row) {
      //enabled:1-有效；0-无效
      let effectiveTime = this.$root.$options.filters["effective-time"](row.effectBegin, row.effectEnd);
      if (row.enabled == 0 || effectiveTime == false) {
        return "tableDisableStyle";
      }
    },
    // 初始化菜单类型
    initMenuType() {
      valueSetAPI.getValueSetByCode("SYS_MENU_TYPE").then(data => {
        // 查询列表
        this.search();
        // 设置菜单类型
        for (const menuType of data) {
          this.menuTypeList[menuType.vsiKey] = menuType.vsiValue;
        }
      });
    },
    // 获取表格列表数据
    queryAssignedMenu({ responseProcess }) {
      let param = {
        commonPageDTO: { currentPage: 1, pageSize: 999 },
        condition: {
          roleId: this.roleId
        },
        pageNum: 1,
        pageSize: 999,
        roleId: this.roleId
      };
      roleAPI.queryAssignedMenu(param).then(data => {
        data.records.forEach(menu => {
          menu.menuTypeName = this.menuTypeList[menu.menuType];
        });
        responseProcess(data);
      });
    },
    // 获取表格列表数据
    // queryAssignedMenu({ responseProcess, param }) {
    //   roleAPI.queryAssignedMenu(param).then(data => {
    //     data.records.forEach(menu => {
    //       menu.menuTypeName = this.menuTypeList[menu.menuType];
    //     });
    //     responseProcess(data);
    //   });
    // },
    search(page = 1) {
      this.$refs["menuTable"].load({ roleId: this.roleId }, page);
    }
  },
  watch: {},
  directives: {}
};
</script>
